<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'订单类型'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="96">
            <div v-if="processDetail.length>0">
                <div class="analyItem anItemBor" @click="clickFourShow(index, item)" v-for="(item,index) in processDetail" :key="index">
                    <p class="analyItemTit tx-center">{{item.name | slice(0,4)}}</p>
                    <div class="analyItemCon">
                        <p class="col-md-4">
                            <span class="cLightGray pr8">订单类型</span>
                            <span>{{item.name| slice(0,4)}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">订单个数</span>
                            <span>{{item.orderNum}}</span>
                        </p>
                        <p class="col-md-4">
                            <span class="cLightGray pr8">订单金额</span>
                            <span>{{item.orderMoney}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="analyItem">
                    <p class="analyItemTit tx-center">暂无数据</p>
                    <div class="analyItemCon">
                        <p class="col-md-3">
                            <span class="cLightGray pr8">暂无数据</span>

                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="pr10">
            <div class="analyItem anItemBor" active-class="anItemBor-active">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="col-md-4 ">
                        <span class="cLightGray pr8">总个数</span>
                        <span>{{orderNum}}</span>
                    </p>
                    <p class="col-md-4 ">
                        <span class="cLightGray pr8">总金额</span>
                        <span>{{orderMoney}}</span>
                        <!-- <span>{{totalMoney}}</span> -->
                    </p>
                </div>
            </div>
        </div>
        <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
            <process-four v-if="fourIndex > -1" :key='fourIndex' :fourItem='fourItem'></process-four>
        </transition-group>
    </div>
</template>
<script>
import {
    mapGetters
} from 'vuex'
import ProcessFour from './four/processFour'
import {
    getStayStayProcessOrderTypeDetail
} from '../../Resources/Api'
export default {
    components: {
        ProcessFour
    },
    data () {
        return {

            processDetail: [],
            orderNum: 0,
            orderMoney: 0,
            fourIndex: -1,
            fourItem: []

        }
    },
    created () {
        this.processDetail = this.$route.query.processDetail
        this.orderNum = this.$route.query.orderNum
        this.orderMoney = this.$route.query.orderMoney


    // this.priceCount = this.$route.query.priceCount
    //  this.GetByRoleOrderListFn()
    },
    methods: {
        clickFourShow (index, item) {
            this.fourIndex = index
            this.fourItem = item
        },
        GetByRoleOrderListFn () {
            this.orderList = []
            let obj = {}
            if (this.input === undefined || this.input === '') {
                obj = {
                    user_card_no: this.user_card_no,
                    order_type_id: this.order_type_id
                }
            } else {
                obj = {
                    user_card_no: this.user_card_no,
                    order_type_id: this.order_type_id,
                    proname: this.input
                }
            }
            getStayStayProcessOrderTypeDetail(obj).then(result => {
                // getStayStayProcessOrderTypeDetail({
                //     user_card_no: this.user_card_no,
                //     order_type_id: this.order_type_id
                // }).then(result => {
                this.orderStatus0 = 0
                this.orderStatus1 = 0
                this.orderStatus2 = 0
                this.orderStatus3 = 0
                this.priceCount = 0
                this.orderList = result.data.Body
                console.log(this.orderList)
                // 2未开启，1进行中，0已完成，3超期
                for (var i = 0; i < this.orderList.length; i++) {
                    switch (this.orderList[i].orderStatus) {
                    case 0:
                        this.orderStatus0++
                        this.priceCount += this.orderList[0].unit_price
                        break
                    case 1:
                        this.orderStatus1++
                        if (this.orderList[i].order_type_id === 28) {
                            this.priceCount += this.orderList[0].finish_price + this.orderList[0].unit_price
                        }
                        break
                    case 2:
                        this.orderStatus2++
                        break
                    case 3:
                        this.orderStatus3++
                        this.priceCount -= this.orderList[0].unit_price
                        break
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        }
    },
    filters: {


        evaluateColor: function (str) {
            switch (str) {
            case 0:
                return 'cGreen'
            case 1:
                return 'cGreen'
            case 2:
                return 'cRed'
            case 3:
                return 'cRed'
            }
        },
        starLevel: function (str) {
            switch (str.toString()) {
            case '-1':
            case '0':
                return '未评价'
            default:
                return str + '星'
            }
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
        $route () {
            this.processDetail = this.$route.query.processDetail
            this.orderNum = this.$route.query.orderNum
            this.orderMoney = this.$route.query.orderMoney
        }
    }
}
</script>
